<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>医生列表</title>
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <link rel="stylesheet" href="../../static/lib/layui/css/layui.css" media="all" />
  <link rel="stylesheet" href="../../static/css/admin.css" media="all" />
  <style>
    .layui-table-cell{
      height:auto !important;
    }
  </style>
</head>

<body>
  <div id="TMM_app">
    <div class="layui-fluid">
      <div class="layui-card">
        <div class="layui-tab layui-tab-brief tmm-table-tab" lay-filter="component-tabs-brief">
          <div class="layui-tab-content">
          </div>
        </div>
        <div class="layui-form layui-card-header tmm-admin-card-header-auto tmm-filter-form">
          <div class="layui-form-item">
            <input type="hidden" id="statusInput"/>
            <div class="layui-inline">
              <label class="layui-form-label" style="width: 70px;">活动名称</label>
              <div class="layui-input-inline">
                <input type="text" name="title" id="title" placeholder="活动名称" autocomplete="off" class="layui-input" />
              </div>
            </div>
            <div class="layui-inline">
              <div class="layui-input-inline">
                <select name="status" id="status">
                  <option value="0">全部</option>
                  <option value="1">禁用</option>
                  <option value="2">启用</option>
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <button class="layui-btn tmm-admin-btn-list" id="query" lay-submit="" lay-filter="LAY-app-contlist-search">
                搜索
              </button>
            </div>
          </div>
        </div>
        <div class="layui-card-body">
          <div class="tmm-head-button">
            <div class="layui-btn-group test-table-operate-btn" style="margin-bottom: 10px; text-align: right;">
              <button class="layui-btn tmm-admin-btn-tags" onclick="add()">
                新增
              </button>
            </div>
          </div>

          <table id="tmm-goods-table" lay-filter="tmm-goods-table" class="layui-table"></table>
        </div>
      </div>
    </div>
  </div>
  <script type="text/html" id="promoteBar">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
    {{#  if(d.status == 1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="up">上线</a>
    {{# } else { }}
    <a class="layui-btn layui-btn-xs" lay-event="down">下线</a>
    {{#  } }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">预约详情</a>
  </script>
  <script src="../../static/lib/layui/layui.js"></script>
  <script src="../../static/js/jquery.min.js"></script>
  <script>
    layui
      .config({
        base: "../../static/js/"
      })
      .extend({
        index: "index"
      })
      .use(["index", "table","laydate"], function () {
        var $ = layui.$,
          admin = layui.admin,
          view = layui.view,
          table = layui.table,
          laydate = layui.laydate,
          form = layui.form;

        table.render({
          elem: "#tmm-goods-table",
          skin: 'nob',
          size: 'lg',
          height: 'full-280',
          even: true,
          page: true,
          limit: 10,
          limits: [10, 20, 50],
          toolbar: '#toolbarDemo' ,//开启头部工具栏，并为其绑定左侧模板
          url: "${path}/t3/listData",
          where: {
              title:$("#title").val(),
              status:$("#status").val(),
            type:1
          },
          cols: [[ //表头
            {field: 'id', title: '活动ID', width:120}
            ,{field: 'title', title: '活动名称', width:120}
            ,{field: 'bgImage', title: '活动背景图片', width:120,templet: function(res){
                return "<a lay-event=\"bgImage\"><img src='"+res.bgImage+"' style='width: 40px;height: 40px;' /></a>"
              }}
            ,{field: 'shareImg', title: '活动分享图片', width:120,templet: function(res){
                return "<a lay-event=\"shareImg\"><img src='"+res.shareImg+"' style='width: 40px;height: 40px;' /></a>"
              }}
            ,{field: 'introduce', title: '活动说明图片', width:120,templet: function(res){
                return "<a lay-event=\"introduce\"><img src='"+res.introduce+"' style='width: 40px;height: 40px;' /></a>"
              }}
            ,,{field: 'poster', title: '活动说明图片', width:120,templet: function(res){
                return "<a lay-event=\"poster\"><img src='"+res.poster+"' style='width: 40px;height: 40px;' /></a>"
              }}
            ,{field: 'status', title: '状态', width:100,templet:function (d) {
                if(d.status==1){
                  return "禁用"
                }else if(d.status==2){
                  return "启用"
                }
                return d.status;
              }}
            ,{field: 'id', title: '操作', width: 400,toolbar:'#promoteBar'}
          ]],
          text:{none:"暂无数据"},
          done: function(res, curr, count){
          }
        });

        //监听行工具事件
        table.on('tool(tmm-goods-table)', function(obj){
          var data = obj.data;
          console.log(obj.event);
          if(obj.event === 'edit'){
            layer.open({
              type: 2
              ,title: "修改活动"
              ,area: ['80%', '80%']
              ,content: '${path}/t3/edit?id='+data.id
              ,maxmin: true
              ,btn: ['确定', '取消']
              ,yes: function(index, layero){
                var iframeWindow = window['layui-layer-iframe'+ index]
                        ,submitID = 'LAY-user-front-submit'
                        ,submit = layero.find('iframe').contents().find('#'+ submitID);

                //监听提交
                iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                  var field = data.field; //获取提交的字段
                  var shareImg = field.shareImg;
                  var bgImage = field.bgImage;
                  var introduce = field.introduce;
                  var poster = field.poster;
                  if(shareImg == null || shareImg == ''){
                    layer.alert("请上传分享图", {icon: 2});
                    return false;
                  }
                  if(bgImage == null || bgImage == ''){
                    layer.alert("请上传背景图", {icon: 2});
                    return false;
                  }
                  if(introduce == null || introduce == ''){
                    layer.alert("请上传说明图", {icon: 2});
                    return false;
                  }
                  if(poster == null || poster == ''){
                    layer.alert("请上传海报图", {icon: 2});
                    return false;
                  }
                  $.ajax({
                    type:"post",
                    url:"${path}/t3/add",
                    dataType:"json",
                    data:field,
                    success:function(data) {
                      if (data.code == 0) {
                        layer.alert(data.msg,{
                                  icon: 1,
                                  skin: 'layer-ext-moon', //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                                  btn: ['确定']
                                }, function() {
                                  layer.close(index); //关闭弹层
                                  window.location.href = window.location.href;
                                }//数据刷新
                        );

                      }else{
                        layer.alert(data.msg, {
                          icon: 2,
                          skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                        })
                      }
                    }
                  });
                });
                submit.trigger('click');
              }
            });
          }

          if(obj.event === 'up') {
            layer.confirm('确认是否上线该活动', {
              btn: ['确定', '取消']
            }, function () {
              shelf(data.id, 2);
            });
          }else if (obj.event === 'down') {
            layer.confirm('确认是否下线该活动', {
              btn: ['确定', '取消']
            }, function () {
              shelf(data.id, 1);
            });
          }else if(obj.event === 'del') {
            layer.confirm('确认是否删除该活动', {
              btn: ['确定', '取消']
            }, function () {
              del(data.id);
            });
          }else if(obj.event === 'detail'){
            layer.open({
              type: 2
              ,title: "预约列表"
              ,area: ['95%', '95%']
              ,content: '${path}/t3/detail/subscribe?id='+data.id
              ,maxmin: true
              ,btn: ['关闭']
            });
          }else if(obj.event === 'shareImg'){
            var icon = data.shareImg;
            var img = new Image();
            img.src = icon;
            var height = 600; //获取图片高度
            var width = img.width; //获取图片宽度
            var imgHtml = "<img src='" + icon + "' />";
            //弹出层
            layer.open({
              type: 1,
              shade: 0.8,
              offset: 'auto',
              area: [width + 'px', height + 'px'],
              shadeClose: true,//点击外围关闭弹窗
              scrollbar: false,//不现实滚动条
              title: "图片预览", //不显示标题
              content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
              cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
              }
            });
          }else if(obj.event === 'bgImage'){
            var icon = data.bgImage;
            var img = new Image();
            img.src = icon;
            var height = 600; //获取图片高度
            var width = img.width; //获取图片宽度
            var imgHtml = "<img src='" + icon + "' />";
            //弹出层
            layer.open({
              type: 1,
              shade: 0.8,
              offset: 'auto',
              area: [width + 'px', height + 'px'],
              shadeClose: true,//点击外围关闭弹窗
              scrollbar: false,//不现实滚动条
              title: "图片预览", //不显示标题
              content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
              cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
              }
            });
          }else if(obj.event === 'introduce'){
            var icon = data.introduce;
            var img = new Image();
            img.src = icon;
            var height = 600; //获取图片高度
            var width = img.width; //获取图片宽度
            var imgHtml = "<img src='" + icon + "' />";
            //弹出层
            layer.open({
              type: 1,
              shade: 0.8,
              offset: 'auto',
              area: [width + 'px', height + 'px'],
              shadeClose: true,//点击外围关闭弹窗
              scrollbar: false,//不现实滚动条
              title: "图片预览", //不显示标题
              content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
              cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
              }
            });
          }else if(obj.event === 'poster'){
            var icon = data.poster;
            var img = new Image();
            img.src = icon;
            var height = 600; //获取图片高度
            var width = img.width; //获取图片宽度
            var imgHtml = "<img src='" + icon + "' />";
            //弹出层
            layer.open({
              type: 1,
              shade: 0.8,
              offset: 'auto',
              area: [width + 'px', height + 'px'],
              shadeClose: true,//点击外围关闭弹窗
              scrollbar: false,//不现实滚动条
              title: "图片预览", //不显示标题
              content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
              cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
              }
            });
          }
        });
        function shelf(id,status) {
          $.ajax({
            type: "post",
            url: "${path}/t3/shelf",
            dataType: "json",
            data: {"id":id,status:status},
            success: function (data) {
              if(data.code != 0){
                layer.msg(data.msg, {
                  offset: '200px'
                  ,icon: 2
                  ,time: 1000
                  ,anim:4
                }, function(){});
                return;
              }
              layer.msg(data.msg, {
                offset: '200px'
                ,icon: 1
                ,time: 1000
              }, function(){
                var field = data.field;
                //执行重载
                table.reload('tmm-goods-table', {
                  where: field
                });
              });
            }
          });
        }
        function del(id) {
          $.ajax({
            type: "post",
            url: "${path}/t3/delete",
            dataType: "json",
            data: {"id":id},
            success: function (data) {
              if(data.code != 0){
                layer.msg(data.msg, {
                  offset: '200px'
                  ,icon: 2
                  ,time: 1000
                  ,anim:4
                }, function(){});
                return;
              }
              layer.msg(data.msg, {
                offset: '200px'
                ,icon: 1
                ,time: 1000
              }, function(){
                var field = data.field;
                //执行重载
                table.reload('tmm-goods-table', {
                  where: field
                });
              });
            }
          });
        }

        //查询
        $('#query').on('click', function(){
            table.reload('tmm-goods-table', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    name:$("#name").val(),
                status:$("#status").val(),
                }
            }, 'data');
        });
      });

    function add() {
      layer.open({
        type: 2
        ,title: "新增活动"
        ,area: ['80%', '80%']
        ,content: '${path}/t3/add'
        ,maxmin: true
        ,btn: ['确定', '取消']
        ,yes: function(index, layero){
          var iframeWindow = window['layui-layer-iframe'+ index]
                  ,submitID = 'LAY-user-front-submit'
                  ,submit = layero.find('iframe').contents().find('#'+ submitID);

          //监听提交
          iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
            var field = data.field; //获取提交的字段
            var shareImg = field.shareImg;
            var bgImage = field.bgImage;
            var introduce = field.introduce;
            var poster = field.poster;
            if(shareImg == null || shareImg == ''){
              layer.alert("请上传分享图", {icon: 2});
              return false;
            }
            if(bgImage == null || bgImage == ''){
              layer.alert("请上传背景图", {icon: 2});
              return false;
            }
            if(introduce == null || introduce == ''){
              layer.alert("请上传说明图", {icon: 2});
              return false;
            }
            if(poster == null || poster == ''){
              layer.alert("请上传海报图", {icon: 2});
              return false;
            }
            var index = layer.load(2);
            $.ajax({
              type:"post",
              url:'${path}/t3/add',
              dataType:"json",
              data:field,
              success:function(data){
                layer.close(index);
                if(data.code ==0){
                  layer.alert(data.msg,{icon:1}, function(){
                    window.location.href = window.location.href;
                  });
                }else{
                  layer.alert(data.msg,{icon:2});
                }
              },
              error:function (data) {
                layer.close(index);
              }
            });
          });
          submit.trigger('click');
        }
      });
    }
  </script>
</body>

</html>